<template>
  <div id="register">
    <div class="images">
      <img src="@/assets/email/login.png" alt="" />
    </div>
    <div class="name-password">
      <div :class="{ active: active == 1 }">
        <input
          type="text"
          v-model="form.mobile"
          @blur="active = ''"
          @focus="active = 1"
          placeholder="手机号"
        />
        <p class="yan-zheng" @click="huo" v-if="yanzhengma">获取验证码</p>
        <p v-else class="yan-zheng-ma">获取验证码({{ time }})</p>
      </div>
      <div :class="{ active: active == 2 }">
        <input
          type="text"
          v-model="form.sms_code"
          @blur="active = ''"
          @focus="active = 2"
          placeholder="短信验证码"
        />
      </div>
      <div class="div1">
        <span>*未注册的手机号将自动注册</span>
        <span  @click="$router.push('/Signin')">使用密码登录</span>
      </div>
      <div class="button">
        <button @click="denglu">登录</button>
      </div>
    </div>
  </div>
</template>
  <script>
import { PostSmsCode, getLogin } from "./yibu/my.js";
const res = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
export default {
  data() {
    return {
      active: "",
      pass: "",
      yanzhengma: true,
      time: 6,
      form: {
        mobile: "",
        sms_code: "",
        sms_type: "login",
        type: 2, //验证码登录
        client: 1,
      },
    };
  },
  methods: {
    async huo() {
      if (!res.test(this.form.mobile)) {
        this.$Toast("手机号格式不正确");
      } else {
        this.yanzhengma = false;
        let res = await PostSmsCode(this.form);
        // console.log(res);

        var t = setInterval(() => {
          if (this.time > 0) {
            this.time--;
          } else {
            this.time = 6;
            this.yanzhengma = true;
            clearInterval(t);
          }
        }, 1000);
      }
    },
    // 登录
    async denglu() {
      if (res.test(this.form.mobile) && this.form.sms_code.length == 6) {
        let res = await getLogin(this.form);
        console.log(res);
        if (res.data.code == 200) {
          localStorage.setItem("Token", res.data.data.remember_token);
          if (res.data.data.is_new == 1) {
            this.$router.push({
              name: "chongzhi",
              params: {
                mobile: this.form.mobile,
                sms_code: this.form.sms_code,
              },
            });
          } else {
            this.$router.push("/my");
          }
        } else {
          this.$Toast(res.data.msg);
        }
      } else {
        this.$Toast("手机号或验证码不能为空");
      }
    },
  },
};
</script>
  <style lang="scss" scoped>
#register {
  width: 100%;
  height: 100%;
  .images {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
  }
  .name-password {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    .active {
      border-bottom: 1px solid red;
    }
    div {
      width: 80%;
      display: flex;
      align-items: center;
      height: 50px;
      input {
        border: none;
      }
      .yan-zheng {
        color: rgba(255, 77, 0, 0.697);
      }
      .yan-zheng-ma {
        color: rgba(255, 77, 0, 0.697);
      }
    }
    .div1 {
      font-size: 14px;
      width: 80%;
      display: flex;
      justify-content: space-between;
      color: rgba(0, 0, 0, 0.5);
      margin-top: 5px;
    }
    .button {
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        border: none;
        border-radius: 30px;
        width: 70%;
        height: 50px;
        color: white;
        background: url("@/assets/email/login-btn.png") no-repeat 100%;
      }
    }
  }
}
</style>